<template>
  <div class="Remote-download">
    <div v-if="!showQRCode" class="Message-card">
          <button class="exit mdui-btn mdui-btn-icon" @click="exit()">
            <i class="mdui-icon material-icons">exit_to_app</i>
          </button>
        <h2 class="title">文件已成功发送</h2>
        <p class="tip"><small>您的取件码</small></p>
        <p id="recvCode">{{ init }}</p>
        <p>接收文件时，请输入该6位数取件码</p>
        <p>
          您也可以
          <a
            id="copyLink"
            class="link1"
            v-clipboard:copy="copy"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          > 复制下载链接 </a>
           或
          <a class="link1" id="viewQRC" @click="viewQRC()">直接扫描二维码下载</a>
        </p>
        <button
          class="download-btn mdui-color-blue-600 mdui-ripple"
          @click="exit()"
        >完成</button>
    </div>
    <QRCode
     :codeUrl='codeUrl'
     @exit="goBack"
     v-else></QRCode>
  </div>
</template>

<script>
import apiConfig from '@/api/apiConfig'
import mdui from 'mdui'
import QRCode from '@/components/QRCode'

export default {
  components: {
    QRCode
  },
  props: {
    shareCodeMsg: Object
  },
  data () {
    return {
      shareLink: '',
      showQRCode: false,
      codeUrl: ''
    }
  },
  methods: {
    onCopy () {
      console.log('onCopy')
      mdui.snackbar({
        message: '已复制到剪切板',
        position: 'top',
        timeout: 2000
      })
    },
    onError () {
      console.log('onError')
    },
    exit () {
      console.log('exit')
      this.$emit('exit', '')
    },
    viewQRC () {
      console.log('viewQRC')
      this.showQRCode = true
      this.codeUrl = apiConfig.guest.downloadShare(this.shareCodeMsg.share_code)
      // return apiConfig.guest.downloadShare(this.shareCodeMsg.share_code)
    },
    goBack (e) {
      console.log('goBack')
      console.log(e)
      this.showQRCode = false
    }
  },
  computed: {
    init () {
      return this.shareCodeMsg.share_code
    },
    copy () {
      return apiConfig.guest.downloadShare(this.shareCodeMsg.share_code)
    }
  }
}
</script>

<style scoped>
:root {
  --theme-color: white;
  --bg-w-pure: rgb(65, 145, 245);
}

.btnMain {
  border-radius: 10px;
  cursor: pointer;
  display: block;
  font-size: 13.3px;
  height: 49px;
  margin-bottom: 20px;
  transition: background-color 0.25s, box-shadow 0.25s, color 0.25s,
    opacity 0.25s;
  width: 100%;
}
.link1 {
  color: rgb(65, 145, 245);
  cursor: pointer;
  transition: all 0.25s;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
#recvCode {
  cursor: text;
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 10px;
  line-height: 30px;
  -webkit-user-select: text;
  user-select: text;
}

.download-btn {
  border-radius: 10px;
  cursor: pointer;
  display: block;
  font-size: 13.3px;
  height: 49px;
  margin-bottom: 20px;
  transition: background-color 0.25s, box-shadow 0.25s, color 0.25s,
    opacity 0.25s;
  width: 100%;
  max-width: 224px;
  /* ↑ button main */
  flex-grow: 2;
  background-color: var(--bg-w-pure);
  border: none;
  box-shadow: 0 5px 20px rgb(65 145 245 / 20%);
  color: var(--theme-color);
  outline: none;
}
.download-btn:active {
  background-color: var(--theme-color);
  box-shadow: 0 5px 30px rgb(65 145 245 / 50%);
  color: #fff;
}
.download-btn:hover {
  box-shadow: 0 5px 30px rgb(65 145 245 / 30%);
}
.exit {
  margin: 10px auto 10px 25px;
}
.Message-card {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 1em;
  width: 80vw;
  max-width: 600px;
  margin: 0 auto 100px;
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.Remote-download {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
input {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  color: rgb(65, 145, 245);
  font-size: 35px;
  letter-spacing: 10px;
  margin-bottom: 20px;
  padding: 15px 15px 15px 25px;
  position: relative;
  text-align: center;
  transition: all 0.25s;
  width: 200px;
}
input:focus,
input:hover {
  border: none;
  outline: none;
  border-bottom: 2px solid rgb(65, 145, 245);
}
</style>
